<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // 模板字符串：模板字符串（template string）是增强版的字符串，用反引号（`）标识。

        let str1="字符串1";
        let str2='字符串2';
        let str3=`字符串3`;
        console.log(typeof str1);
        console.log(typeof str2);
        console.log(typeof str3);

        let strs="<li>li01</li>"+
                 "<li>li02</li>"+
                 "<li>li03</li>";
        console.log(strs);

        // 模板字符串,允许字符结构换行定义（保留编码的格式）

        let strs2=`
            <li>itany01</li>
            <li>itany02</li>
            <li>itany03</li>
            <li>itany04</li>
            <li>itany05</li>
            <li>itany06</li>
        `;
       console.log(strs2);

    //    在模板字符串中可以通过语法直接在模板中调用变量：${变量名|全局对象的变量|全局函数|自定义函数|简单表达式}
       let arr=["元素1","元素2","元素3","元素4","元素5"];
       let strs3=`
            <p>${arr[0]}</p>
            <p>${arr[1]}</p>
            <p>${arr[2]}</p>
            <p>${arr[3]}</p>
            <p>${arr[4]}</p>
       `;
       console.log(strs3);
                       

       let strs4=`
            <p>${arr[0]}</p>
            <p>${Math.PI}</p>
            <p>${show()}</p>
            <p>${Math.pow(2,4)}</p>
            <p>${10==10?"yes":"no"}</p>
       
       `;
        console.log(strs4);
       function show(){
           return "嘿嘿";
       }
       window.onload=function(){
            var mydiv=document.getElementById("mydiv");
            // mydiv.innerHTML=strs2;
            // mydiv.innerHTML=strs3;
            mydiv.innerHTML=strs4;
       };

    </script>
</head>
<body>
    <div id="mydiv"></div>
</body>
</html>